<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./less/story.css">
    <link rel="stylesheet" href="./icon/css/all.css">
    <script src="./js/wow2.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="header">
        <h1>
            <a href="./index.html">
                <img src="./img/logo_white.svg" width="200px" height="23px">
            </a>
        </h1>
        <div class="header-nav-right">
            <a href="./news.html">NEWS</a>
            <a href="./story.html">STORY</a>
            <a href="./onair.html">ONAIR</a>
            <a href="./staff&cast.html">STAFF&CAST</a>
            <a href="./character.html">CHARACTER</a>
            <a href="#">MOVIE</a>
            <a href="#">Blu-ray&DVD</a>
            <a href="#">MUSIC</a>
            <a href="#">GOODS</a>
            <a href="#">SPECIAL</a>
            <a href="#">BOOK</a>
            <a href="#"><i class="fa-solid fa-dove"></i></a>
        </div>
    </div>
    <div class="rhombus-img"></div>
    <!-- 主体 -->
    <div class="main">
        <div class="bg-img">
            <div class="bg-bias">
                <div class="new">
                    <span>STORY</span>
                </div>
            </div>
        </div>
        <div class="center-nav">
            <ul class="nav">
                <li>
                    <a href="javascript:;" class="wow">INTRODUCTION</a>
                </li>
                <li>
                    <a href="javascript:;" class="wow">STORY</a>
                </li>
            </ul>
            <div class="introduce">
                    <div class="head">
                        <span class="sta">
                            STORY
                        </span>
                    </div>
            </div>
            <div class="img">
              <div class="first wow">
                   <a href="javascript:;">
                       <dl>
                           <dt><img src="./img/01.jpg"></dt>
                           <dd>
                               <span>EPISODE 02</span>
                               よろしい、ならば二次元だ
                            </dd>
                       </dl>
                   </a>
              </div>
              <div class="two wow">
                   <a href="javascript:;">
                    <dl>
                        <dt><img src="./img/02.jpg"></dt>
                        <dd>
                            <span>EPISODE 01</span>
                            よろしい、ならば二次元だ
                        </dd>
                    </dl>
                   </a>
              </div>
            </div>
        </div>
        <!-- 尾部 -->
        <div class="footer">
            <div class="top">
                <a href="javascript:;"><img src="./img/bnr01.jpg"></a>
                <a href="javascript:;"><img src="./img/bnr04.jpg"></a>
                <a href="javascript:;"><img src="./img/bnr05.jpg"></a>
                <a href="javascript:;"><img src="./img/bnr02.jpg"></a>
                <a href="javascript:;"><img src="./img/bnr03.jpg"></a>
                <a href="javascript:;"><img src="./img/bnr08.jpg"></a>
                <a href="javascript:;"><img src="./img/bnr06.jpg"></a>
                <a href="javascript:;"><img src="./img/bnr07.jpg"></a>
                <a href="javascript:;"><img src="./img/10th_logo.png" width="100px" height="100px"></a>
            </div>
            <div class="center">
                <img src="./img/kadokawa.png" width="158px">
                <img src="./img/hgs.png" height="72px">
            </div>
            <p>© 2021 橘公司・つなこ／KADOKAWA／「デート・ア・ライブⅣ」製作委員会</p>
        </div>
        <script>
            new WOW().init()
        </script>
    </div>
</body>

</html>